<template>
  <div class="lsc-order">
    <van-row class="lsc-order-address">
      <van-col offset="1" span="21" style="padding-bottom:10px;">
        收货人：
        {{orderInfo.addressInfo.contact_man + '&nbsp;&nbsp;&nbsp;&nbsp;' + orderInfo.addressInfo.contact_tel}}
      </van-col>
      <van-col offset="1" span="20">
        收货地址：
        {{ orderInfo.addressInfo.province_name + orderInfo.addressInfo.city_name + orderInfo.addressInfo.address }}
      </van-col>
      <van-icon name="edit" @click="onAddressList(orderInfo.addressInfo.id)"/>
    </van-row>
    <van-cell-group>
      <van-cell 
        :title="sankeTitle" 
        :value="sankeValue"
        icon="edit" 
        @click="showSankeAddress=true"  
        is-link/>
      <van-card
        v-for="item in orderInfo.prtItems"
        :key="item.shopping_id"
        :title="item.name"
        :desc="item.model_no"
        :num="item.qty"
        :thumb="item.img_url"
      />
      <van-cell title="配送方式" is-link  :value="orders.type" @click="onExpressType()"/>
      <!-- <van-cell title="备注" is-link :value="orders.remark" @click="showRemark=true"/> -->
      
      <van-field
        v-model="orders.remark"
        label="备注"
        type="textarea"
        placeholder="请输入备注"
        class="lsc-goods-details-input"
        rows="1"
        autosize
      />
      <!-- <van-switch-cell v-model="orders.notice" title="短信通知" /> -->
    </van-cell-group>
    <!-- 配送方式 -->
    <van-actionsheet v-model="showType" :actions="actions" />
    <!-- 散客地址添加 -->
    <van-popup v-model="showSankeAddress" position="right" style="width:100%;height:100%;overflow:auto;">
      <van-nav-bar
        title="散客地址"
        left-arrow
        @click-left="onBackOrder"
      />
      <van-search
        v-model="tels"
        show-action
        placeholder="请输入手机号码，搜索已有信息"
        @search="onSearchAddress"
      >
        <div slot="action" @click="onSearchAddress">搜索</div>
      </van-search>
      
      <van-address-edit
        id="addressEdit"
        ref="addree"
        :address-info="sankeAddressInfo"
        :area-list="areaList"
        show-delete
        @save="onSaveSankeAddress"
        @delete="onCancelSankeAddress"
      />
    </van-popup>
    <van-submit-bar
      button-text="提交订单"
      @submit="onSubmitOrder"
    />

    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'
import areaList from '../../area'
import areaIdList from '../../areaid'

export default {
  name: 'order',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      orderInfo: 'getOrderInfo'
    })
  },
  data () {
    return {
      areaList,
      areaIdList,
      tels: '',
      orders: {
        type: '',
        typeid: '',
        remark: '',
        notice: false
      },
      addressId: 0,
      sankeId: 0,
      showSankeAddress: false,
      sankeTitle: '备注散客邮寄地址',
      sankeValue: '',
      sankeAddress: {},
      sankeAddressInfo: {},
      mbAddress: {},
      remark: '',
      showRemark: false,
      showType: false,
      actions: []
    }
  },
  created() {
    setTimeout(()=>{
      this.$nextTick(()=>{
      // 重置textarea高度属性
        const txtarea = document.querySelector('#addressEdit').childNodes[0].children[3].firstChild.children[1].childNodes[0]
        txtarea.style.height = 'inherit'
        // 搜索会员地址信息
        this.tels = this.$refs.addree.data.tel

      })
    },100)
  },
  methods: {
    onExpressType() {
      this.showType = true
      let _this = this
      this.actions = this.orderInfo.expressItems
      this.orderInfo.expressItems.forEach((element,index)=>{
        this.actions[index].callback = _this.onClickType
      })
      
    },
    getOrderInfo() {
      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.order.addressItem)
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          this.address = res.data.data
        })
    },
    onBackOrder() {
      this.showSankeAddress = false
    },
    onAddressList(id) {
      this.$router.push(`/addlist?addid=${id}`)
    },
    onClickType(item) {
      this.orders.type = item.name
      this.orders.typeid = item.id
      this.showType = false
    },
    onSubmitOrder() {
      let shoppingIds = []
      this.orderInfo.prtItems.forEach(element=>{
        shoppingIds.push(element.shopping_id)
      })
      let orderParams = {
            addressId: this.orderInfo.addressInfo.id,
            shopping_ids: shoppingIds,
            shipping_type: this.orders.typeid,
            remark: this.orders.remark,
            is_send_msg: this.orders.notice,
            mid: this.sankeId
          }
          
      if(orderParams.shipping_type == '') {
        this.$toast('请选择配送方式');
        return
      }
      this.$toast.loading({
        duration: 0,
        message: '更新中...'
      });
      this.axios.post(api.order.submit, orderParams)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            // 获取会员基础信息
            this.$store.dispatch('fetchBaseInfo')
            this.$router.push(`/ordersdetail?from=order&id=${res.data.data}`)
          }
        })
    },
    getShoppingId() {
      let shoppingIds = []
      this.orderInfo.prtItems.forEach(element=>{
        shoppingIds.push(element.shopping_id)
      })
      return shoppingIds
    },
    getProvincesId(data) {

      let findProvincesId = this.areaIdList.provinces
      return findProvincesId.findIndex((value) => {
        return value.province_name == data
      })
    },
    getCitysId(data) {

      let findCitysId = this.areaIdList.citys
      return findCitysId.findIndex((value) => {
        return value.city_name == data
      })
    },
    onSaveSankeAddress(content) {
      this.mbAddress = {
        id: this.sankeAddressInfo.tel == content.tel ? this.sankeAddressInfo.id : 0,
        name: content.name,
        mobileno: content.tel,
        province_id: this.getProvincesId(content.province) + 1,
        city_id: this.getCitysId(content.city) + 1,
        area_code: content.area_code,
        area: content.county,
        address: content.address_detail
      }
      
      this.$toast.loading({
        duration: 0,
        message: '正在保存...'
      });

      this.axios.post(api.agent.saveMbAddress, this.mbAddress)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            this.sankeId = res.data.data
            this.sankeTitle = ' '
            this.sankeValue = '已备注'
            this.showSankeAddress = false
          }
        })
    },
    onCancelSankeAddress() {
      this.showSankeAddress = false
      this.sankeId = 0
      this.sankeAddressInfo = {}
      this.sankeTitle = '备注散客邮寄地址'
      this.sankeValue = ''
    },
    onSearchAddress() {
      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.agent.memberAddress, {params: {mobileno: this.tels}})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          let addressInfo = res.data.data
          this.sankeAddressInfo = res.data.data
          this.sankeAddressInfo.address_detail = addressInfo.address
          this.sankeAddressInfo.tel = addressInfo.mobileno
          this.sankeAddressInfo.area_code = addressInfo.area_code
        })
    }
  },
  watch: {
    remark(nval) {
      nval ? this.orders.remark = '已备注' : this.orders.remark = ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-order {
  padding-bottom: 50px;
}

.lsc-order .van-search__action>div {
  padding: 0 10px;
}
.lsc-order-address {
  padding: 10px 0;
  background: #fff7cc;
}
.lsc-order .card-goods {
  padding: 0;
  margin-bottom: 0;
}
.lsc-order .van-card__row {
  margin-top: 8px;
}
.lsc-order .goods-cell-group {
    margin: 15px 0;
}

.lsc-order-remark-textarea {
  margin: 10px;
}
.lsc-order-remark-textarea textarea {
  width: 100%;
  border: 0;
}
.lsc-order .van-field__control {
  height: inherit;
}
</style>
